<template>
    <addEditFaProjectView ref="addEditFaProjectView" />
    <addFileView ref="addFileView" />
    <addEditFaAssetsView ref="addEditFaAssetsView" />
    <addEditChaiFenView ref="addEditChaiFenView" />
    <lookAttachmentView ref="lookAttachmentView" />
    <lookapproveView ref="lookapproveView" />
    <addEditDelExportView ref="addEditDelExportView" />
    <tablePrint ref="tablePrint" />
    <el-main>
        <div class="teacher">
            <div class="app-table">

                <div class="tabs_box">
                    <div class="tab_card" v-for="(item, index) in editableTabs" :key="index"
                        @click="goTabsCard(item.name, item.title)" :id="item.flag">
                        <p>{{ item.title }}</p>
                        <el-icon @click="delTabsCard(item)">
                            <Close />
                        </el-icon>
                    </div>
                </div>
                <div class="app-body" v-if="editableTabs.length >= 1 && tabsCardColor == '批次信息'">
                    <div class="app-search">
                        <el-form :inline="true" class="demo-form-inline" v-model="form">
                            <el-form-item label="批次名称">
                                <el-input placeholder="请输入批次名称" v-model="form.agreementName"
                                    @keyup.enter="searchEnter"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="创建人">
                                <el-input placeholder="请输入创建人姓名" v-model="form.createTeacherName"
                                    @keyup.enter="searchEnter"></el-input>
                            </el-form-item> -->
                            <!-- <el-form-item label="创建人工号">
                                <el-input placeholder="请输入创建人工号" v-model="form.createTeacherNumber"></el-input>
                            </el-form-item> -->
                            <el-form-item>
                                <el-button class="serach_btn" type="primary" @click="onSubmit"
                                    @keyup.enter="searchEnter">搜索</el-button>
                                <el-button class="add_btn" type="success" @click="add">添加</el-button>
                                <el-button type="warning" style="border-radius: 8px;" @click="exportExcel"
                                    v-if="roleName == '管理员'">导出批次</el-button>
                                <el-button type="info" style="border-radius: 8px;" @click="exportYearExcel"
                                    v-if="roleName == '管理员'">按年限导出</el-button>
                                <!-- <el-button type="danger" @click="importExcel">批量导入<el-icon class="el-icon--right">
                                        <Upload />
                                    </el-icon></el-button> -->
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table :data="list" style="width: 100%" :row-class-name="tableRowClassName">
                        <el-table-column prop="id" label="id" width="80" />
                        <el-table-column prop="company" label="归口单位" width="110" />
                        <el-table-column prop="agreementName" label="批次名称" width="130" />
                        <el-table-column prop="sourceOfFunds" label="经费来源" />
                        <el-table-column prop="sourceOfAssets" label="资产来源" />
                        <!-- <el-table-column prop="createTeacherName" label="创建人" /> -->
                        <el-table-column prop="createDepartment" label="部门" />
                        <el-table-column prop="storageDateStr" label="入账日期" width="110" />
                        <el-table-column prop="remark" label="备注" />
                        <!-- <el-table-column prop="createTeacherNumber" label="创建人工号" /> -->
                        <el-table-column prop="status" label="审批状态">
                            <template style="display: block" #default="scope">
                                <p style="margin:0;padding: 0;" v-if="scope.row.status == 0">未审批</p>
                                <p style="margin:0;padding: 0;" v-if="scope.row.status == 1">审批中</p>
                                <p style="margin:0;padding: 0;" v-if="scope.row.status == 2">已通过</p>
                                <p style="margin:0;padding: 0;" v-if="scope.row.status == 3">已驳回</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="690px">
                            <template style="display: block" #default="scope">
                                <el-button class="edit_btn" size="small" type="success"
                                    @click="addFaAssets(scope.row)">添加资产
                                </el-button>
                                <el-button class="edit_btn" size="small" type="success"
                                    @click="submitApprove(scope.row)">提交审批
                                </el-button>
                                <el-button class="edit_btn" size="small" type="success"
                                    @click="goZichan(scope.row)">查看资产
                                </el-button>
                                <el-button class="edit_btn" size="small" type="success"
                                    @click="downloadReceipt(scope.row)">下载验收单
                                </el-button>
                                <el-button class="edit_btn" size="small" type="success"
                                    @click="lookApprove(scope.row)">查看审批
                                </el-button>
                                <el-button class="edit_btn" size="small" type="success"
                                    @click="lookAttachment(scope.row)">附件
                                </el-button>
                                <el-button class="edit_btn" size="small" type="success"
                                    @click="exportBatch(scope.row)">导出
                                </el-button>
                                <el-button class="edit_btn" size="small" type="success"
                                    @click="editFaProject(scope.row)">编辑
                                </el-button>
                                <el-button class="del_btn" size="small" type="danger"
                                    @click="deleteFaProject(scope.row.id)">删除
                                </el-button>
                                <!-- <el-button class="del_btn" size="small" type="danger" @click="print(scope.row.id)">打印
                                </el-button> -->
                            </template>
                        </el-table-column>
                        <template v-slot:empty>
                            <el-empty description="暂无数据"></el-empty>
                        </template>
                    </el-table>
                    <el-config-provider :locale="locale">
                        <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                            layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                            v-model:current-page="size" v-model:page-size="pageSize"
                            @current-change="changeCurrentPage">
                        </el-pagination>
                    </el-config-provider>
                </div>
                <div class="app-body" v-if="editableTabs.length >= 1 && tabsCardColor == '资产信息'">
                    <div class="app-search">
                        <el-form :inline="true" class="demo-form-inline" v-model="assetsForm">
                            <el-form-item label="资产名称">
                                <el-input placeholder="请输入资产名称" v-model="form.name"
                                    @keyup.enter="searchEnter1"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button class="serach_btn" type="primary" @click="onSubmit1"
                                    @keyup.enter="searchEnter1">搜索</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table :data="assetsList" :border="childBorder">
                        <el-table-column prop="projectName" label="批次名称" width="120" />
                        <el-table-column prop="company" label="归口单位" width="150" />
                        <el-table-column prop="name" label="资产名称" width="150" />
                        <el-table-column prop="model" label="型号" />
                        <el-table-column prop="price" label="单价" />
                        <el-table-column prop="amount" label="数量" />
                        <el-table-column prop="money" label="金额" />
                        <!-- <el-table-column prop="department" label="使用部门" />
                            <el-table-column prop="" label="使用人" /> -->
                        <el-table-column prop="place" label="存放地点" />
                        <el-table-column prop="managerDepartment" label="管理部门" />
                        <el-table-column prop="manager" label="管理人" />
                        <el-table-column label="操作" width="300px">
                            <template style="display: block" #default="scope">
                                <div style="display: flex;">
                                    <div>
                                        <el-button class="edit_btn" size="small" type="success"
                                            @click="editFaAssets(scope.row)">编辑
                                        </el-button>
                                        <el-button class="del_btn" size="small" type="danger"
                                            @click="deleteFaAssets(scope.row.id)">删除
                                        </el-button>

                                    </div>
                                    <div v-show="scope.row.amount > 1 && scope.row.status !== '02'">

                                        <el-button class="edit_btn" size="small" type="success"
                                            @click=" goChaifen(scope.row, '组合拆分')">组合拆分
                                        </el-button>
                                        <el-button class="del_btn" size="small" type="danger"
                                            @click=" goChaifen(scope.row, '平均拆分')">平均拆分
                                        </el-button>
                                        <!-- <el-button class="edit_btn" size="small" type="success"
                                            v-show="scope.row.categoryCode != null && (scope.row.categoryCode.substring(0, 2) == 10 || scope.row.categoryCode.substring(0, 2) == 50 || scope.row.categoryCode.substring(0, 2) == 60 || scope.row.categoryCode.substring(0, 2) == 20)"
                                            @click=" goChaifen(scope.row, '组合拆分')">组合拆分
                                        </el-button>
                                        <el-button class="del_btn" size="small" type="danger"
                                            v-show="scope.row.categoryCode != null && (scope.row.categoryCode.substring(0, 2) != 10 && scope.row.categoryCode.substring(0, 2) != 50 && scope.row.categoryCode.substring(0, 2) != 60)"
                                            @click=" goChaifen(scope.row, '平均拆分')">平均拆分
                                        </el-button> -->
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-config-provider :locale="locale">
                        <el-pagination :total="expandTotal" :page-size="expandLimit"
                            :page-sizes="[5, 10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                            v-model:current-page="expandPage" v-model:page-size="expandPageSize"
                            @size-change="changePageSize1" @current-change="changeCurrentPage1">
                        </el-pagination>
                    </el-config-provider>
                </div>
                <bottomView />

            </div>

        </div>
    </el-main>
</template>
<script>
import addEditFaProjectView from "@/components/assets/addEditFaProject.vue";
import addEditFaAssetsView from "@/components/assets/addEditFaAssets.vue";
import addEditChaiFenView from "@/components/assets/chaiFen.vue";
import lookAttachmentView from "@/components/assets/lookAttachmentView.vue";
import lookapproveView from "@/components/assets/lookapproveView.vue";
import addEditDelExportView from "@/components/assets/addEditDelExportView.vue";
import tablePrint from "@/components/assets/tablePrint.vue";
import addFileView from "@/components/addExcelFile.vue";
import { ElConfigProvider, ElMessageBox, ElMessage, ElLoading } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture, Upload, Close } from "@element-plus/icons-vue";
import bottomView from "@/components/bottom.vue";
import { API_BASE_NAME, API_BASE_NAME1, } from '../../constants';
export default {
    name: "FaProjectListView",
    data() {
        return {
            type: 0,
            title: "",
            page: 1,
            pageSize: 10,
            total: 0,
            limit: 10,
            expandPage: 1,
            expandPageSize: 10,
            expandTotal: 0,
            expandLimit: 10,
            rowData: null,
            expandedRowsData: null,
            list: [],
            assetsList: [],
            expandedRowKeys: [],
            assetsForm: {
                name: "",
            },
            expendId: "",
            form: {
                company: "",
                agreementName: "",
                agreementNum: "",
                invoiceNumber: "",
                voucherNo: "",
                oddNumber: "",
                sourceOfFunds: "",
                sourceOfAssets: "",
                purchasesStyle: "",
                accountingType: "",
                subject: "",
                subjectType: "",
                remark: "",
                invoiceEnlosure: "",
                enclosure: "",
                agreementEnclosure: "",
                createTeacherName: "",
                createTeacherNumber: "",
                createDepartment: "",
            },
            addFaProjectForm: {
                agreementName: "",
                sourceOfFunds: "财政拨款",
                sourceOfAssets: "采购",
                remark: "",
                invoiceEnlosure: "",
                enclosure: "",
                agreementEnclosure: "",
            },
            addAssetsForm: {
                name: "",
                code: "",
                oldCode: "",
                category: "",
                categoryCode: "",
                standards: "",
                model: "",
                price: "",
                amount: "",
                money: "",
                department: "",
                managerDepartment: "",
                manager: "",
                place: "",
            },
            editableTabs: [
                {
                    title: '批次信息',
                    name: '1',
                    flag: true,
                },
                // {
                //     title: '资产信息',
                //     name: '2',
                //     flag: false,
                // },
            ],
            editableTabsValue: 1,
            tabsCardColor: '批次信息',
            user: {},
            filterObj: {},
            roleName: "",
        };
    },
    components: {
        addEditFaProjectView,
        addEditFaAssetsView,
        addEditChaiFenView,
        addFileView,
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        ElMessage, Upload, addEditDelExportView, tablePrint,
        bottomView, Close, lookAttachmentView, lookapproveView
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.user = JSON.parse(sessionStorage.getItem('user'))
        this.getMyPermission();
        // this.getFaProjectList();
    },
    computed: {

    },
    watch: {
        // $route() {
        //     this.getFaProjectList();
        // },
    },
    methods: {
        getMyPermission() {
            httpService("/javaApi/getMyPermission", {}, "get").then((data) => {
                if (data) {
                    console.log(123, data.includes('assetsManager'), data.includes('assetsLaboratory'));
                    // data.includes(assetsManager)
                    if (data.includes('assetsManager') && data.includes('assetsLaboratory')) {
                        this.roleName = '普通权限'
                    } else {
                        this.roleName = '管理员'
                    }
                    console.log(this.roleName);
                    this.getFaProjectList();
                }
            });
        },
        print() {
            this.$refs.tablePrint.dialogFormVisible = true
        },

        handleExpandChange(row, expandedRows) {
            this.expandedRowsData = expandedRows
            this.rowData = row

        },
        submitApprove(value) {
            // /javaApi/faProjectApprove/submitApprove
            let params = new FormData()
            params.append("projectId", value.id)
            httpService(`/javaApi/faProjectApprove/submitApprove`, params, "post").then(
                (data) => {
                    console.log(data);
                    if (data.code == 200) {
                        ElMessage.success("提交成功");
                    } else {
                        ElMessage.warning("提交失败");
                    }
                }
            );
        },

        goTabsCard(id, str) {
            // console.log(id, str);
            this.editableTabs.map(item => {
                return item.name == id ? item.flag = true : item.flag = false
            })
            this.tabsCardColor = str
            if (this.editableTabs.length == 1) {
                this.tabsCardColor = this.editableTabs[0].title
                this.editableTabs[0].flag = true
            }
        },
        delTabsCard(data) {

            this.editableTabs = this.editableTabs.filter(item => item.name != data.name)
            if (data.title == "资产信息") {

                this.changeCurrentPage(this.page)
            }
            if (this.editableTabs.length == 1) {
                this.tabsCardColor = this.editableTabs[0].title
            } else if (this.editableTabs.length == 0) {
                this.tabsCardColor = ''
                this.$router.push({
                    path: 'assetsMainView',
                })
            }
        },
        getRowKey(row) {
            return row.id;
        },
        removeTab(targetName) {
            this.editableTabs = this.editableTabs.filter(item => item.name != targetName)
        },
        goChaifen(row, str) {
            this.$refs.addEditChaiFenView.title = str
            this.$refs.addEditChaiFenView.personnelType = this.type
            this.$refs.addEditChaiFenView.dialogFormVisible = true;
            this.$refs.addEditChaiFenView.chaiFenData = row;
        },
        exportYearExcel() {
            this.$refs.addEditDelExportView.title = "按年限导出"
            this.$refs.addEditDelExportView.personnelType = this.type
            this.$refs.addEditDelExportView.dialogFormVisible = true;
        },

        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getFaProjectList();
            }
        },
        searchEnter1: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getFaList();
            }
        },
        add() {
            this.$refs.addEditFaProjectView.title = "添加批次"
            this.$refs.addEditFaProjectView.personnelType = this.type
            this.$refs.addEditFaProjectView.dialogFormVisible = true;
            this.$refs.addEditFaProjectView.getDepartmentList()
        },
        addFaAssets(obj) {
            this.$refs.addEditFaAssetsView.title = "添加资产"
            this.$refs.addEditFaAssetsView.personnelType = this.type
            this.$refs.addEditFaAssetsView.dialogFormVisible = true;
            this.$refs.addEditFaAssetsView.parentId = obj.id;
        },
        goZichan(data) {
            this.expendId = data.id
            if (this.editableTabs.length == 1) {
                this.editableTabs.push({
                    title: '资产信息',
                    name: '2',
                    flag: true,
                })
                this.tabsCardColor = '资产信息'
                this.editableTabs.map(item => {
                    if (item.title == '资产信息') {
                        item.flag = true
                    } else {
                        item.flag = false
                    }
                    // return item.name != 2 ? item.flag = true : item.flag = false
                })
                httpService(`/javaApi/faList/list/${this.expandPage}/${this.expandPageSize}/${data.id}/0`, {}, "get").then(
                    (data) => {
                        this.expandTotal = data.total
                        this.assetsList = data.list
                    }
                );
            } else {
                this.goTabsCard("2", "资产信息")
                httpService(`/javaApi/faList/list/${this.expandPage}/${this.expandPageSize}/${data.id}/0`, {}, "get").then(
                    (data) => {
                        this.expandTotal = data.total
                        this.assetsList = data.list
                    }
                );
            }
        },
        editFaAssets(obj) {
            this.$refs.addEditFaAssetsView.title = "修改资产"
            this.$refs.addEditFaAssetsView.personnelType = this.type
            this.$refs.addEditFaAssetsView.dialogFormVisible = true;
            // this.$refs.addEditFaAssetsView.list = [obj];
            this.$refs.addEditFaAssetsView.editId = obj.id
            // this.$refs.addEditFaAssetsView.getDepartmentList()
            this.$refs.addEditFaAssetsView.getads(obj.id)
        },
        editFaProject(obj) {
            this.$refs.addEditFaProjectView.title = "修改信息"
            this.$refs.addEditFaProjectView.getFaProjectById(obj.id);
            this.$refs.addEditFaProjectView.dialogFormVisible = true;
            this.$refs.addEditFaProjectView.getDepartmentList()
        },
        deleteFaAssets(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/faList/deleteById", "id=" + id, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                // this.handleExpandChange(this.rowData, this.expandedRowsData);
                                this.getFaList()
                            } else {
                                ElMessage.error("删除失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },
        deleteFaProject(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/faProject/deleteById", "id=" + id, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.getFaProjectList();
                            } else {
                                ElMessage.error("删除失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },
        downloadReceipt(arr) {
            var loadingInstance = ElLoading.service({
                lock: true, text: '加载中', background: 'rgba(0, 0, 0, 0.7)',
            });
            httpService(`/javaApi/faProject/exportFaProjectCheck/` + arr.id, {}, "get").then(
                (data) => {
                    loadingInstance.close()
                    if (data.code === 1) {
                        window.location.href = data.msg
                    }
                }
            );
        },
        reloadData() {
            this.page = 1;
            this.getFaProjectList()
        },
        importExcel() {
            this.$refs.addFileView.dialogFormVisible = true;
            this.$refs.addFileView.title = "批量导入资产项目表";
            this.$refs.addFileView.uploadApiUrl = "/api/faProject/importExcel";
        },
        exportExcel() {
            var loadingInstance = ElLoading.service({
                lock: true, text: '加载中', background: 'rgba(0, 0, 0, 0.7)',
            });
            let str = ''
            if (this.user.campus == 1) {
                str = API_BASE_NAME
            } else if (this.user.campus == 2) {
                str = API_BASE_NAME1
            }

            let obj = {}
            if (this.roleName == '管理员') {
                obj = {
                    "company": str,
                }
            } else if (this.roleName == '普通权限') {
                obj = {
                    "company": str,
                    "manager": this.user.name
                }
            }
            httpService("/javaApi/faList/exportFaList", obj, "get").then(
                (data) => {
                    loadingInstance.close()
                    if (data.code == 200) {
                        window.open("https://wx.zhengzhong.cn" + data.message, '_blank')
                        // window.open("http://192.168.9.20" + data.message, '_blank')
                        // window.location.href = data.message
                    }
                }
            );
        },
        exportBatch(value) {
            var loadingInstance = ElLoading.service({
                lock: true, text: '加载中', background: 'rgba(0, 0, 0, 0.7)',
            });
            httpService("/javaApi/faList/exportFaList", {
                "parentId": value.id
            }, "get").then(
                (data) => {
                    loadingInstance.close()
                    if (data.code == 200) {
                        // window.open("http://192.168.9.20" + data.message, '_blank')
                        window.open("https://wx.zhengzhong.cn" + data.message, '_blank')
                        // window.location.href = data.message
                    }
                }
            );
        },
        onSubmit() {
            this.getFaProjectList();
        },
        onSubmit1() {
            this.getFaList();
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getFaProjectList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getFaProjectList();
        },
        changePageSize1(size) {
            this.expandPageSize = size;
            this.expandLimit = size;

            // this.handleExpandChange(this.rowData, this.expandedRowsData);
            this.getFaList()
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage1(page) {
            this.expandPage = page;
            this.getFaList()
            // this.handleExpandChange(this.rowData, this.expandedRowsData);
        },
        tableRowClassName({ row, rowIndex }) {
            return "";
        },
        getFaProjectList(id) {
            let str = ''
            if (this.user.campus == 1) {
                str = API_BASE_NAME
            } else if (this.user.campus == 2) {
                str = API_BASE_NAME1
            }

            let obj = {}
            if (this.roleName == '管理员') {
                obj = {
                    "agreementName": this.form.agreementName,
                    "company": str,
                }
            } else if (this.roleName == '普通权限') {
                obj = {
                    "agreementName": this.form.agreementName,
                    "company": str,
                    "createTeacherNumber": this.user.teacherNumber
                }
            }
            httpService(
                "/javaApi/faProject/list/" + this.page + "/" + this.pageSize,
                obj,
                "get"
            ).then((data) => {
                if (data.list) {
                    data.list.map(item => item.createDate = item.createDate.slice(0, 10))
                }
                this.list = data.list;
                this.total = data.total;
                this.pageCount = data.pages;
            });
        },
        getFaList() {
            console.log(this.expendId);
            httpService(
                // "/javaApi/faProject/list/" + this.page + "/" + this.pageSize,
                `/javaApi/faList/list/${this.expandPage}/${this.expandPageSize}/${this.expendId}/0`,
                {
                    'name': this.assetsForm.name,
                },
                "get"
            ).then((data) => {
                this.assetsList = data.list;
                this.expandTotal = data.total;
                // this.pageCount = data.pages;
            });
        },

        lookAttachment(data) {
            this.$refs.lookAttachmentView.dialogFormVisible = true;
            this.$refs.lookAttachmentView.title = "查看附件";
            this.$refs.lookAttachmentView.getAttachmentById(data.id)
        },
        lookApprove(data) {
            this.$refs.lookapproveView.dialogFormVisible = true;
            this.$refs.lookapproveView.title = "查看审批";
            this.$refs.lookapproveView.getApproveById(data.id)
        },
    },
};
</script>
<style scoped>
.el-main {
    padding: 0px;
}

.teacher-content {
    width: 100%;
}

.app-table {
    background: #eff3f5;
    padding: 10px;
}

.app_add {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 10px;
}

.app-search {
    padding: 10px;
    background-color: #fff !important;
}

.app-separator {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}

.app-body {
    background: white;
    padding: 0px 20px 10px 20px;
    margin-bottom: 10px;
    min-height: calc(100vh - 283px);
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
    text-align: center;
    padding: 20px 10px;
    background-color: #fff;
}

.serach_btn {
    background-color: #007EFF;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.add_btn {
    background-color: #00c78c;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.edit_btn {
    background-color: #fff;
    color: #007EFF;
    border: none;
}

.del_btn {
    background-color: #fff;
    color: #FF0000;
    border: none;
}

.tabs_box {
    background-color: #ffffff;
    width: calc(100% - 25px);
    /* width: 98.55%; */
    height: 50px;
    display: flex;
    justify-content: flex-start;
    padding: 10px 0 0 25px;
    /* padding: 10px 0 0 2%; */
    border-radius: 5px 5px 0 0;
}

.tab_card {
    height: 35px;
    width: 100px;
    display: flex;
    font-size: 14px;
    align-items: center;
    justify-content: space-around;
    border: 1px solid rgb(228, 231, 237);
    box-sizing: border-box;
    margin-right: -1px;
    cursor: pointer;
}

.tab_card .el-icon {
    font-size: 16px;
}

/* .tab_card:first-child {
    border-radius: 6px 0 0 0;
}
.tab_card:last-child {
    border-radius: 0 6px 0 0;
} */

.tab_card_color {
    color: rgb(64, 158, 255);
}

#true {
    color: rgb(64, 158, 255);

}
</style>
